import React from "react";
import { Card, List, Tag, Button, Space, Input, Select } from "antd";
import {
  FileOutlined,
  FolderOutlined,
  DownloadOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import styled from "styled-components";

const { Search } = Input;

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  .ant-card-head-title {
    font-weight: bold;
  }
`;

const StudentResources: React.FC = () => {
  // 模拟数据
  const resources = [
    {
      id: "1",
      name: "操作系统教材.pdf",
      course: "操作系统",
      type: "教材",
      size: "15.2MB",
      uploadTime: "2024-03-01",
      downloads: 156,
    },
    {
      id: "2",
      name: "进程调度实验指导.docx",
      course: "操作系统",
      type: "实验资料",
      size: "2.8MB",
      uploadTime: "2024-03-05",
      downloads: 89,
    },
    {
      id: "3",
      name: "计算机网络课件.pptx",
      course: "计算机网络",
      type: "课件",
      size: "8.5MB",
      uploadTime: "2024-03-10",
      downloads: 245,
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <StyledCard
        title="学习资源"
        extra={
          <Space>
            <Select
              defaultValue="all"
              style={{ width: 120 }}
              options={[
                { value: "all", label: "全部课程" },
                { value: "os", label: "操作系统" },
                { value: "network", label: "计算机网络" },
              ]}
            />
            <Select
              defaultValue="all"
              style={{ width: 120 }}
              options={[
                { value: "all", label: "全部类型" },
                { value: "textbook", label: "教材" },
                { value: "slides", label: "课件" },
                { value: "lab", label: "实验资料" },
              ]}
            />
            <Search placeholder="搜索资源..." style={{ width: 200 }} />
          </Space>
        }
      >
        <List
          dataSource={resources}
          renderItem={(resource) => (
            <List.Item
              actions={[
                <Button type="primary" icon={<DownloadOutlined />}>
                  下载
                </Button>,
              ]}
            >
              <List.Item.Meta
                avatar={
                  resource.type === "教材" ? (
                    <FileOutlined style={{ fontSize: 24 }} />
                  ) : (
                    <FolderOutlined style={{ fontSize: 24 }} />
                  )
                }
                title={
                  <Space>
                    {resource.name}
                    <Tag color="blue">{resource.type}</Tag>
                  </Space>
                }
                description={
                  <Space>
                    <Tag color="cyan">{resource.course}</Tag>
                    <span>大小：{resource.size}</span>
                    <span>上传时间：{resource.uploadTime}</span>
                    <span>下载次数：{resource.downloads}</span>
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      </StyledCard>
    </div>
  );
};

export default StudentResources;
